<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    duration?: number;
    theme?: "default" | "success" | "error";
  }>(),
  {
    duration: 3000,
    theme: "success",
  }
);
const emit = defineEmits(["closed"]);

const show = ref(false);

const themeCss = computed(() => {
  switch (props.theme) {
    case "success":
      return "bg-green-700 text-white border-green-400";

    case "error":
      return "bg-red-700 text-white border-red-400";
  }
  return "bg-orange-700 text-white border-orange-400";
});

onMounted(() => {
  const tt = setTimeout(() => {
    show.value = true;
    clearTimeout(tt);
  }, 50);

  const t = setTimeout(() => {
    show.value = false;
    emit("closed");
    clearTimeout(t);
  }, props.duration);
});
</script>

<template>
  <div
    class="fixed left-1/2 -translate-x-1/2 px-2 py-1 rounded-md shadow-md z-10 border transition-all duration-300"
    :class="{
      [themeCss]: show,
      'visible opacity-100 top-1': show,
      'invisible opacity-0 -top-2': !show,
    }"
  >
    <slot>提示信息</slot>
  </div>
</template>
